<template>
	<view class="room-container">
		<!-- 顶部标题区域 -->
		<view class="header-section">
			<view class="header-card">
				<view class="header-content">
					<view class="header-title">
						<text class="title-text">会议室列表</text>
						<text class="title-subtitle">Meeting Rooms</text>
					</view>
					<view class="header-icon">🏢</view>
				</view>
			</view>
		</view>

		<!-- 会议室列表区域 -->
		<view class="room-section">
			<!-- 加载状态 -->
			<view class="loading-state" v-if="isLoading">
				<view class="loading-icon">⏳</view>
				<text class="loading-text">加载中...</text>
			</view>
			
			<!-- 会议室列表 -->
			<view class="room-list" v-else>
				<view class="room-item" 
					v-for="(item, index) in dataList" 
					:key="index"
					@click="navigateToDetail(item)"
				>
					<view class="room-content">
						<view class="room-info">
							<text class="room-title">{{ getRoomName(item) }}</text>
							<text class="room-desc" v-if="getRoomDesc(item)">{{ getRoomDesc(item) }}</text>
						</view>
						<view class="room-action">
							<text class="action-text">预约</text>
							<image class="action-arrow" src="/static/right.png" mode="aspectFit"></image>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 空状态 -->
		<view class="empty-state" v-if="!isLoading && dataList.length === 0">
			<view class="empty-icon">🏢</view>
			<text class="empty-title">暂无会议室</text>
			<text class="empty-text">当前没有可用的会议室</text>
			<view class="empty-action" @click="refreshList">
				<text>刷新</text>
			</view>
		</view>
	</view>
</template>

<script>
import api, { handleApiError } from '@/utils/api.js'

export default {
	data() {
		return {
			dataList: [],
			isLoading: false
		}
	},
	mounted() {
		this.loadRoomList()
	},
	methods: {
		// 加载会议室列表
		async loadRoomList() {
			this.isLoading = true
			uni.showLoading({
				title: '加载中...'
			})
			
			try {
				const response = await api.getRoomList()
				uni.hideLoading()
				this.isLoading = false
				
				if (response && response.code === 200) {
					this.dataList = response.rows || response.data || []
				} else {
					uni.showToast({
						title: response.msg || '获取会议室列表失败',
						icon: 'none'
					})
				}
			} catch (error) {
				uni.hideLoading()
				this.isLoading = false
				handleApiError(error)
			}
		},
		
		// 刷新列表
		async refreshList() {
			await this.loadRoomList()
		},
		
		// 获取会议室名称
		getRoomName(item) {
			return item.roomName || item.name || item.ENROLL_TITLE || item.title || '未知会议室'
		},
		
		// 获取会议室描述
		getRoomDesc(item) {
			return item.location || item.description || item.desc || item.remark || ''
		},
		
		navigateToDetail(item) {
			// 检查登录状态
			const token = uni.getStorageSync('token');
			if (!token) {
				uni.showModal({
					title: '提示',
					content: '预约会议室需要先登录，是否前往登录？',
					success: (res) => {
						if (res.confirm) {
							uni.navigateTo({
								url: '/pages/login/index'
							});
						}
					}
				});
				return;
			}
			
			const roomId = item.roomId || item.id || item._id
			const roomName = this.getRoomName(item)
			uni.navigateTo({
				url: `/pages/enroll/predetermined?id=${roomId}&title=${encodeURIComponent(roomName)}`
			});
		}
	}
}
</script>

<style lang="less" scoped>
.room-container {
	padding: 30rpx;
	background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
	min-height: 100vh;
}

/* 顶部标题区域 */
.header-section {
	margin-bottom: 30rpx;
}

.header-card {
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(10rpx);
	border-radius: 20rpx;
	padding: 40rpx 30rpx;
	box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
}

.header-content {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.header-title {
	flex: 1;
}

.title-text {
	font-size: 48rpx;
	font-weight: bold;
	color: #333;
	display: block;
	margin-bottom: 8rpx;
}

.title-subtitle {
	font-size: 24rpx;
	color: #666;
	opacity: 0.8;
}

.header-icon {
	font-size: 60rpx;
	margin-left: 20rpx;
}

/* 会议室列表区域 */
.room-section {
	margin-bottom: 30rpx;
}

.room-list {
	display: flex;
	flex-direction: column;
	gap: 20rpx;
}

.room-item {
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(10rpx);
	border-radius: 20rpx;
	overflow: hidden;
	box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
	transition: all 0.3s ease;
	cursor: pointer;
}

.room-item:active {
	transform: scale(0.98);
	background: rgba(255, 255, 255, 1);
	box-shadow: 0 12rpx 40rpx rgba(0, 0, 0, 0.15);
}

.room-content {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 40rpx 30rpx;
}

.room-info {
	flex: 1;
}

.room-title {
	font-size: 36rpx;
	font-weight: bold;
	color: #333;
	display: block;
	margin-bottom: 8rpx;
}

.room-desc {
	font-size: 26rpx;
	color: #666;
	opacity: 0.8;
	display: block;
}



.room-action {
	display: flex;
	align-items: center;
	gap: 15rpx;
}

.action-text {
	color: #2870E5;
	font-size: 30rpx;
	font-weight: 600;
}

.action-arrow {
	width: 32rpx;
	height: 32rpx;
	opacity: 0.6;
}

/* 加载状态 */
.loading-state {
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(10rpx);
	border-radius: 20rpx;
	padding: 80rpx 40rpx;
	text-align: center;
	box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
}

.loading-icon {
	font-size: 60rpx;
	margin-bottom: 20rpx;
	animation: spin 1s linear infinite;
}

.loading-text {
	font-size: 28rpx;
	color: #666;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

/* 空状态 */
.empty-state {
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(10rpx);
	border-radius: 20rpx;
	padding: 80rpx 40rpx;
	text-align: center;
	box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
}

.empty-icon {
	font-size: 80rpx;
	margin-bottom: 20rpx;
}

.empty-title {
	font-size: 36rpx;
	font-weight: bold;
	color: #333;
	display: block;
	margin-bottom: 15rpx;
}

.empty-text {
	font-size: 28rpx;
	color: #666;
	opacity: 0.8;
	margin-bottom: 40rpx;
	display: block;
}

.empty-action {
	background: #2870E5;
	color: #fff;
	padding: 20rpx 40rpx;
	border-radius: 25rpx;
	font-size: 28rpx;
	display: inline-block;
	cursor: pointer;
	transition: all 0.3s ease;
}

.empty-action:active {
	transform: scale(0.95);
}
</style>
